<template>
	<div class="vue_app GiftConfirmOrder" style="position: relative;width: 100%;">
		<my-header :title="'确认订单'" :hasTitle="true" :hasBack="true"></my-header>
		<div class="Confirmcard">
			<div class="giftimg">
				<img :src="carddata.giftcardImg||'static/image/big-giftcard.png'" />
			</div>
			<div class="giftcontant">
				<div class="givegiftname">
					<span>{{carddata.giftcardName}}</span>
				</div>
				<p>面值：{{Number(carddata.denomination).toFixed(2)}}元</p>
				<p>单价：￥{{Number(carddata.paidPrice).toFixed(2)}}/张</p>
			</div>
		</div>
		<div class="buynum">
			<span>购买数量</span>
			<div class="edit_data">
				<i class="del_cart" style="float: left" @click="delnumi"></i>
				<input type="num" v-model="goodsnum" readonly/>
				<i class="add_to_cart" @click="addnumi"></i>
			</div>
		</div>
		<div class="givegift" v-if="carddata.firstCouponCodes && isgive || carddata.oldCouponCodes && isgive">
			<span class="givegiftspan">赠送</span>
			<div class="givegiftcontant">
				<div v-for="(val,index) in (carddata.firstCouponCodes ? JSON.parse(carddata.firstCouponCodes) : JSON.parse(carddata.oldCouponCodes))" :key="index">
					<p v-if="val.couponHaveNum>0">
						<span class="givegiftcontantpsp">{{val.couponName}}</span>
						<span style="float: right;"><em>x</em>{{(val.couponNum * goodsnum)<=val.couponHaveNum ? val.couponNum * goodsnum :val.couponHaveNum}}</span>
					</p>
				</div>
				<div style="color: #ef5423;font-size: 0.58rem;">优惠券赠送数量有限，送完即止</div>
			</div>
		</div>
		<!--<div class="giftfp" @click.stop="goBillDetail">
			<span>发票</span>
			<p><span>{{this.BillBtns?"电子发票":"不开发票"}}</span><i class="icon njfont nj-youjiantou"></i></p>
		</div>-->
		<div class="cardoperation">
			<span>合计：<span class="allmoney">￥{{Number(carddata.paidPrice*goodsnum).toFixed(2)}}</span></span>
			<span class="bottom" @click="payfone">提交订单</span>
		</div>

	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import { Toast } from '@/utils/toast';
	import { showLoading, hideLoading } from "@/utils/loading";
	import { lipinquan } from '../../config/orderTypeCode';
	import { MessageBox } from '@/ui-components';
	export default {
		data() {
			return {
				goodsnum: 1, //礼品卡购买数量
				carddata: {},
				billNo: '', //订单号
				isAgain: 0, //第几次占用优惠券
				BillBtns: '', //发票状态
				hasInvoice: 0, //是否开发票
				isgive: true, //是否有赠品
			}
		},
		components: {
			"my-header": MyHeader,
		},
		methods: {
			//购物车减号
			delnumi() {
				this.goodsnum--
					if(this.goodsnum == 0) {
						this.goodsnum = 1
					}
			},
			//购物车加号
			addnumi() {
				this.goodsnum++
			},
			//请求页面数据
			getcarddata() {
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/giftCard/getGiftCardForH5?giftcardCode=' + this.$route.query.giftcardCode,
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					if(res.data.returnCode == 1) {
						this.carddata = res.data.data[0][0]
						var arrdata = this.carddata.firstCouponCodes ? JSON.parse(this.carddata.firstCouponCodes) : JSON.parse(this.carddata.oldCouponCodes)
						var havedata = []
						if(arrdata) {
							for(var i = 0; i < arrdata.length; i++) {
								if(arrdata[i].couponHaveNum == 0) {
									havedata.push(arrdata[i])
								}
							}
							if(havedata.length === arrdata.length) {
								this.isgive = false
							}
						}
					} else if(res.data.returnCode == 2) {
						Toast({
							message: '礼品卡已失效',
							duration: 2000,
							type: "fail"
						})
						setTimeout(() => {
							window.history.go(-1);
						}, 1000)
					}else{
						Toast({
							message: '请求接口失败',
							duration: 2000,
							type: "fail"
						})
					}
				})
			},
			//点击去支付按钮
			payfone() {
				showLoading()
				//校验可赠送的券的数量（锁定优惠券）
				this.getorder()
			},
			//点击跳转开发票
			goBillDetail() {
				this.BillBtns = this.$store.state.hzh.BillBtn;
				this.$router.push({
					path: "BillDetail",
					query: {
						giftCard: true
					}
				});
			},
			//获取订单号
			getorder() {
				if(this.BillBtns) {
					this.hasInvoice = 1
					this.invoicesTitleId = this.$store.state.hzh.getBillInfor
				} else {
					this.invoicesTitleId = ""
				}
				let params2 = {
					'cardName': this.carddata.giftcardName, //礼品卡名称
					'cardNum': this.goodsnum, //购买数量
					'firstCard': this.carddata.firstCard, //是否首单（0否1是）
					'cardCode': this.carddata.giftcardCode, //礼品卡编码
					'totalPay': this.carddata.denomination * this.goodsnum, //总金额
					'totalMinis': this.carddata.preferentialPrice * this.goodsnum, //扣减金额
					'realPay': this.carddata.paidPrice * this.goodsnum, //实付金额
					'firstCouponCodes': this.carddata.firstCouponCodes, //首充占的优惠券
					'oldCouponCodes': this.carddata.oldCouponCodes, //老用户占的优惠券
					'isAgain': 1, //this.isAgain //第几次占用优惠券
					'invoiceFlag': 0, //发票状态(0-未开票，1-开票成功，2-失败)
					'hasInvoice': this.hasInvoice, //是否有发票：0-否，1-是
					'invoicesTitleId': this.invoicesTitleId, //发票抬头表主键
					'invoiceContext': this.$store.state.hzh.BillContent, //发票内容
				};
				let config2 = {
					url: window.api.customer_host + '/giftCardIndent/add',
					//url: 'http://172.19.4.164:33004/giftCardIndent/add',
					method: 'POST',
					data: params2,
					headers: {
						'sessionId': localStorage.getItem('sessionId'),
					},
				};
				axios(config2).then((res) => {
					if(res.data.returnCode === 1) {
						this.billNo = res.data.data[0]
						this.getBuyNo()
					} else if(res.data.returnCode === 2) {
						hideLoading()
						/*Toast({
							message: '优惠券赠送活动结束',
							duration: 2000,
							type: "fail"
						})
						setTimeout(() => {
							window.history.go(-1);
						}, 1000)*/
						MessageBox.confirm('优惠券赠送活动结束，是否继续购买？').then(() => {
							this.isAgain = 1
							this.getorder()
						})
					} else if(res.data.returnCode === 3) {
						hideLoading()
						MessageBox.confirm(res.data.msg + '，是否继续购买？').then(() => {
							this.isAgain = 1
							this.getorder()
						})
					} else if(res.data.returnCode === 4) {
						hideLoading()
						Toast({
							message: '优惠券无法获取',
							duration: 2000,
							type: "fail"
						})
						setTimeout(() => {
							window.history.go(-1);
						}, 1000)
					} else {
						hideLoading()
					}
				})
			},
			//支付请求接口
			getBuyNo() {
				let params3 = {
					'bill_id': this.billNo,
					'sessionId': localStorage.getItem('sessionId'),
				};
				let config3 = {
					url: window.api.customer_host + '/giftCardH5/getGiftCardPayNo',
					method: 'POST',
					data: params3,
				};
				axios(config3).then((res) => {
					hideLoading()
					if(res.data.returnCode == 1) {
						this.$store.dispatch('hzh/SaveBillBtn', "");
						//跳转到支付页面
						var orderNo = [];
						orderNo = res.data.data[0]
						this.$router.replace({
							name: 'pay',
							params: {
								orderNo: orderNo,
								orderType: lipinquan,
								cardNo: this.billNo,
								cardCode: this.carddata.giftcardCode,
							}
						});
					}
				})
			},
		},
		computed: {

		},
		watch: {

		},
		mounted() {
			this.getcarddata()
			this.BillBtns = this.$store.state.hzh.BillBtn;
		},
	}
</script>

<style>
	.GiftConfirmOrder .Confirmcard {
		padding: 0.75rem;
		background-color: #fff;
	}
	
	.GiftConfirmOrder .Confirmcard .giftimg {
		width: 38%;
		height: 0;
		position: relative;
		padding-bottom: 20%;
		display: inline-block;
	}
	
	.GiftConfirmOrder .Confirmcard .giftimg img {
		position: absolute;
		width:6rem;
		height:3.75rem
	}
	
	.GiftConfirmOrder .Confirmcard .giftcontant {
		text-align: left;
		position: relative;
		display: inline-block;
		width: 60%;
		padding-left: 0.5rem;
		vertical-align: top;
	}
	
	.GiftConfirmOrder .Confirmcard .giftcontant .givegiftname {
		margin-bottom: 0.5rem;
	}
	
	.GiftConfirmOrder .Confirmcard .giftcontant p {
		font-size: 0.6rem;
	}
	
	.GiftConfirmOrder .buynum {
		position: relative;
		background-color: #fff;
		height: 2rem;
		padding-left: 0.75rem;
	}
	
	.GiftConfirmOrder .buynum span {
		float: left;
		display: inline-block;
		margin-top: 0.25rem;
	}
	
	.GiftConfirmOrder .givegift {
		background-color: #FFEFEF;
		padding: 0.5rem 0.75rem;
		text-align: left;
		position: relative;
	}
	
	.GiftConfirmOrder .givegift .givegiftspan {
		display: inline-block;
		vertical-align: top;
		width: 12%;
	}
	
	.GiftConfirmOrder .givegift .givegiftcontant {
		display: inline-block;
		width: 86%;
	}
	
	.GiftConfirmOrder .givegift .givegiftcontant p {
		font-size: 0.6rem;
		margin-bottom: 0.2rem;
	}
	
	.GiftConfirmOrder .givegift .givegiftcontant .givegiftcontantpsp {
		display: inline-block;
		width: 80%;
	}
	
	.GiftConfirmOrder .giftfp {
		margin-top: 0.5rem;
		background-color: #fff;
		padding: 0.5rem 0.75rem;
		text-align: left;
	}
	
	.GiftConfirmOrder .giftfp p {
		float: right;
		color: #333;
	}
	
	.GiftConfirmOrder .giftfp p i {
		font-size: 0.7rem;
		color: #ccc;
		font-weight: bold;
		margin-left: 0.2rem;
	}
	/*合计提交订单*/
	
	.GiftConfirmOrder .cardoperation {
		position: fixed;
		bottom: 0rem;
		width: 100%;
		height: 2.5rem;
		line-height: 2.5rem;
		background-color: #fff;
		border-top: 1px solid #eee;
	}
	
	.GiftConfirmOrder .cardoperation .allmoney {
		font-weight: bold;
		font-size: 0.8rem;
		color: #EF5423;
	}
	
	.GiftConfirmOrder .cardoperation .bottom {
		position: absolute;
		right: 0rem;
		height: 100%;
		width: 5rem;
		background-color: #EF5423;
		color: #fff;
	}
</style>